<script setup lang="ts">
import { Modal } from 'ant-design-vue';
import { useAuthStore } from '@/store/modules/auth';
import { useRouterPush } from '@/hooks/common/router';
import { $t } from '@/locales';
import { changeUserPassword } from '@/service/api';

defineOptions({
  name: 'UserAvatar'
});

const authStore = useAuthStore();
const { routerPushByKey, toLogin } = useRouterPush();

function loginOrRegister() {
  toLogin();
}

function logout() {
  Modal.confirm({
    title: $t('common.tip'),
    content: $t('common.logoutConfirm'),
    okText: $t('common.confirm'),
    cancelText: $t('common.cancel'),
    onOk: () => {
      authStore.resetStoreBase();
    }
  });
}

function changePassword() {
  const { handleShow, handleClose, handleLoading } = window.$useModal({
    modalOption: {
      title: '修改密码',
      width: '600px'
    },
    formList: [
      {
        type: 'inputPassword',
        key: 'oldPassword',
        label: '原密码',
        placeholder: '请输入原密码',
        span: 24,
        rule: {
          required: true,
          message: '请输入原密码',
          trigger: 'change'
        }
      },
      {
        type: 'inputPassword',
        key: 'newPassword',
        label: '新密码',
        placeholder: '请输入新密码',
        span: 24,
        rule: {
          required: true,
          message: '请输入新密码',
          trigger: 'change'
        }
      },
      {
        type: 'inputPassword',
        key: 'reinputNewPassword',
        label: '确认新密码',
        placeholder: '请输入确认新密码',
        span: 24,
        rule: {
          required: true,
          message: '请输入确认新密码',
          trigger: 'change'
        }
      }
    ],
    // eslint-disable-next-line consistent-return
    onOk: async (formData: any) => {
      if (formData.newPassword !== formData.reinputNewPassword) {
        window.$message.error('两次输入的密码不一致');
        return;
      }
      Modal.confirm({
        title: '修改密码提示',
        content: `您的新密码为:'${formData.newPassword}'，确认修改密码吗？`,
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          handleLoading(true);
          try {
            const { error } = await changeUserPassword(formData);
            if (!error) {
              window.$message.success('密码修改成功!', 3, () => {
                handleClose();
                authStore.resetStoreBase();
              });
              handleClose();
            }
          } finally {
            handleLoading(false);
          }
        }
      });
    }
  });
  handleShow();
}
</script>

<template>
  <AButton v-if="!authStore.isLogin" @click="loginOrRegister">{{ $t('page.login.common.loginOrRegister') }}</AButton>
  <ADropdown v-else placement="bottomRight" trigger="click">
    <ButtonIcon>
      <SvgIcon local-icon="user-circle" class="text-icon-large" />
      <span class="text-16px font-medium">
        {{ authStore.userInfo.user.nickName || authStore.userInfo.user.userName }}
      </span>
    </ButtonIcon>
    <template #overlay>
      <AMenu>
        <AMenuItem disabled class="user-name-item">
          <div class="flex-col">
            <div class="flex-center gap-8px">
              <SvgIcon local-icon="user-circle" class="text-icon" />
              <span class="font-medium">{{ authStore.userInfo.user.nickName || authStore.userInfo.user.userName }}</span>
            </div>
            <div v-if="authStore.userInfo.user.nickName && authStore.userInfo.user.userName" class="ml-49px text-12px text-gray-500">
              {{ authStore.userInfo.user.userName }}
            </div>
          </div>
        </AMenuItem>
        <AMenuDivider />
        <!-- <AMenuItem @click="routerPushByKey('user-center')"> -->
        <!-- <AMenuItem>
          <div class="flex-center gap-8px">
            <SvgIcon local-icon="user-circle" class="text-icon" />
            {{ $t('common.userCenter') }}
          </div>
        </AMenuItem>
        <AMenuDivider /> -->
        <AMenuItem @click="changePassword">
          <div class="flex-center gap-8px">
            <!-- <SvgIcon icon="ph:sign-out" class="text-icon" /> -->
            <SvgIcon local-icon="change-password" class="text-size-15px" />
            修改密码
          </div>
        </AMenuItem>
        <AMenuDivider />
        <AMenuItem @click="logout">
          <div class="flex-center gap-8px">
            <!-- <SvgIcon icon="ph:sign-out" class="text-icon" /> -->
            <SvgIcon local-icon="sign-out" class="text-icon" />
            {{ $t('common.logout') }}
          </div>
        </AMenuItem>
      </AMenu>
    </template>
  </ADropdown>
</template>

<style scoped></style>
